<script lang="tsx">
import { defineComponent, onMounted, computed, ref, watch } from 'vue';
import { $t } from '#/locales';
interface Props {
  totalPages: number;
  currentPage: number;
  handlePageChange: (page: number) => void;
}

export default defineComponent({
  name: 'Pagination',
  props: {
    totalPages: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    handlePageChange: {
      type: Function,
      default: () => { }
    }
  },
  setup(props: Props) {
    const jumpPage = ref(props.currentPage);

    // 生成分页数组
    const paginationArray = computed(() => {
      const pages = [];
      const total = props.totalPages;
      const current = props.currentPage;

      if (total <= 7) {
        for (let i = 1; i <= total; i++) {
          pages.push(i);
        }
      } else {
        if (current <= 4) {
          for (let i = 1; i <= 7; i++) {
            pages.push(i);
          }
          pages.push('...');
          pages.push(total - 1);
          pages.push(total);
        } else if (current >= total - 3) {
          pages.push(1);
          pages.push(2);
          pages.push('...');
          for (let i = total - 6; i <= total; i++) {
            pages.push(i);
          }
        } else {
          pages.push(1);
          pages.push(2);
          pages.push('...');
          for (let i = current - 1; i <= current + 1; i++) {
            pages.push(i);
          }
          pages.push('...');
          pages.push(total - 1);
          pages.push(total);
        }
      }
      return pages;
    });

    // 跳转到指定页
    const handleJumpToPage = () => {
      const page = parseInt(jumpPage.value.toString());
      if (page && page >= 1 && page <= props.totalPages) {
        props.handlePageChange(page);
      }
    };

    // 处理输入框回车事件
    const handleKeyPress = (event: KeyboardEvent) => {
      if (event.key === 'Enter') {
        handleJumpToPage();
      }
    };

    onMounted(() => {
      jumpPage.value = props.currentPage;
    });

    // 监听当前页码变化，同步跳转输入框的值
    watch(() => props.currentPage, (newPage) => {
      jumpPage.value = newPage;
    });

    return () => (
      <div class="pagination-section">
        <div class="pagination-wrapper">
          <div class="pagination">
            {/* 上一页按钮 */}
            <button
              class="pagination-btn prev"
              disabled={props.currentPage === 1}
              onClick={() => props.handlePageChange(props.currentPage - 1)}
            >
              &lt;
            </button>

            {/* 页码按钮 */}
            <div class="bg-[#fff] rounded-[16px] h-[40px] flex gap-[8px] items-center p-[2px]">
              {paginationArray.value.map((page, index) => (
                <button
                  key={index}
                  class={`pagination-btn ${page === props.currentPage ? 'active' : ''} ${page === '...' ? 'ellipsis' : ''}`}
                  onClick={() => typeof page === 'number' && props.handlePageChange(page)}
                  disabled={page === '...'}
                >
                  {page}
                </button>
              ))}
            </div>


            {/* 下一页按钮 */}
            <button
              class="pagination-btn next"
              disabled={props.currentPage === props.totalPages}
              onClick={() => props.handlePageChange(props.currentPage + 1)}
            >
              &gt;
            </button>
          </div>

          {/* 跳转区域 */}
          <div class="jump-section">
            <span class="jump-text">{$t('competition.lives.jumpTo')}</span>
            <input
              class="jump-input"
              type="number"
              value={jumpPage.value}
              onInput={(e) => jumpPage.value = parseInt((e.target as HTMLInputElement).value) || 1}
              onKeypress={handleKeyPress}
              min="1"
              max={props.totalPages}
            />
            <span class="jump-text">{$t('competition.lives.pages')}</span>
            <button class="jump-btn" onClick={handleJumpToPage}>
              go
            </button>
          </div>
        </div>
      </div>
    );
  }
})
</script>

<style scoped>
/* 分页样式 */
.pagination-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination-btn {
  min-width: 40px;
  height: 40px;
  background: white;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.pagination-btn:hover:not(:disabled) {
  border-color: #0067D1;
  color: #0067D1;
  background: #f0f8ff;
}

.pagination-btn.active {
  background: #0067D1;
  border-color: #0067D1;
  color: white;
  font-weight: 600;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.ellipsis {
  cursor: default;
  border: none;
  background: transparent;
  min-width: 20px;
}

.pagination-btn.ellipsis:hover {
  background: transparent;
  border: none;
  color: #666;
}

/* 跳转区域样式 */
.jump-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jump-text {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.jump-input {
  min-width: 40px;
  padding: 0 5px;
  width: auto;
  max-width: 100px;
  height: 40px;
  border: 1px solid #e8eaed;
  border-radius: 16px;
  text-align: center;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: border-color 0.3s ease;
}

.jump-input:focus {
  border-color: #0067D1;
}

.jump-input::-webkit-outer-spin-button,
.jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.jump-input[type=number] {
  -moz-appearance: textfield;
}

.jump-btn {
  width: 40px;
  height: 40px;
  background: #fff;
  color: #595959;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.jump-btn:hover {
  background: #0067D1;
  color: #fff;
}

.jump-btn:active {
  background: #004494;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .jump-section {
    gap: 6px;
  }

  .jump-input {
    width: 40px;
  }

  .jump-btn {
    width: 40px;
  }
}
</style>
